<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>标签管理</title>
    <head th:insert="~{admin/import :: layui-ADES}"></head>
</head>
<body>
<div class="layui-form-item my-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">标签编号：</label>
        <div class="layui-input-inline">
            <input type="text" name="id" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">标签名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="name" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline layui-form">
        <label class="layui-form-label">标签分类：</label>
        <div class="layui-input-inline">
            <select name="categoryId" id="categoryId">
                <option value="">请选择标签分类</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <div>
            <button class="layui-btn" id="search">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
        </div>
    </div>
    <div class="layui-inline">
        <div>
            <button class="layui-btn" id="add">
                <i class="layui-icon">&#xe654;</i>新增
            </button>
        </div>
    </div>
    <!-- <button class="layui-btn layui-btn-primary layui-btn-radius" id="add" style="float:right;">新增</button> -->
</div>

<!--<table id="resTable" class="layui-table">-->
<!--</table>-->
<table class="layui-hide" id="test" lay-filter="demo">
    <!--存放数据-->
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/plugins/layui/layui.js"></script>
<script>

    layui.config({
        base: '/build/js/',
        version: '1.0.1'
    }).use(['jquery', 'laydate', 'laypage', 'layer', 'table'], function () {
        var $ = layui.$,
            laydate = layui.laydate //日期
            , laypage = layui.render //分页
            , layer = layui.layer //弹层
            , table = layui.table; //表格

        search();
        findCid();
        $("#search").click(function () {
            search();
        });
        $("#add").click(function () {
            window.location.href = "/admin/tag/add";
        });


        function findCid() {
            $.ajax({
                url: '/getCategory',
                type: 'POST',
                dataType: 'json',
                async: true, //同步请求
                success: function (res) {
                    if (res.code == 200) {
                        var CidStr = "<option value=''>请选择标签分类</option>";
                        $.each(res.data,function(index, category){
                            CidStr += "<option value='" + category.id + "'>" + category.name + "</option>"
                        });
                        $("#categoryId").html(CidStr);
                        renderForm();
                    }else {
                        layer.msg(res.message);
                    }
                },
                error: function () {
                    layer.msg("服务器异常");
                }
            })
        }

        //重新渲染表单
        function renderForm() {
            layui.use('form', function () {
                var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                form.render();
            });
        }

        function search() {
            //执行一个 table 实例
            table.render({
                elem: '#test'
                //, height: 600
                , where: {
                    "id": $('input[name="id"]').val(),
                    "name": $('input[name="name"]').val(),
                    "categoryId":$('select[name="categoryId"]').val()
                }
                , url: '/admin/tag/getList' //数据接口
                , page: true //开启分页
                , cols: [
                    [ //表头
                    {field: 'id', title: '编号', width: 100, align: 'center', sort: true}
                    , {field: 'name', title: '标签名称', width: 210, align: 'center'}
                    , {field: 'cname', title: '分类名称', width: 210, align: 'center'}
                    , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
                    ]
                ]
            });
            //监听工具条
            table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    window.location.href = "/admin/tag/detail?id=" + data.id;
                } else if (layEvent === 'del') {
                    layer.confirm('确定删除' + data.name + '标签？', function (index) {
                        $.ajax({
                            url: '/admin/tag/delTag',
                            data: {'id': data.id},
                            dataType: 'json',
                            success: function (res) {
                                if (res.code==200) {
                                    obj.del(); //删除对应行（tr）的DOM结构
                                    layer.close(index);
                                }
                                layer.msg(res.message);
                                search();
                            },
                            error: function () {
                                layer.msg("系统异常");
                            }
                        })

                    });
                } else if (layEvent === 'edit') {
                    window.location.href = "/admin/tag/edit?id=" + data.id;
                } else if (layEvent === 'moveup') {
                    //上移
                    $.ajax({
                        url: '/admin/tag/editSort',
                        data: {'id': data.id, 'type': 'up'},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                search();
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    })
                } else if (layEvent === 'movedown') {
                    //下移
                    $.ajax({
                        url: '/admin/tag/editSort',
                        data: {'id': data.id, 'type': 'down'},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                search();
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    })
                } else if (layEvent === 'movetop') {
                    //置顶
                    $.ajax({
                        url: '/admin/tag/editSort',
                        data: {'id': data.id, 'type': 'top'},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                search();
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    })
                }
            });
        }

        //将日期直接嵌套在指定容器中
        var dateIns = laydate.render({
            elem: '#laydateDemo'
            , position: 'static'
            , calendar: false //是否开启公历重要节日
            , mark: { //标记重要日子
                '2020-01-05': '实训结束'
                , '2019-11-11': '剁手'
                , '2019-11-30': ''
            }
            , done: function (value, date, endDate) {
                if (date.year == 2020 && date.month == 11 && date.date == 30) {
                    dateIns.hint('一不小心就月底了呢');
                }
            }
            , change: function (value, date, endDate) {
                layer.msg(value)
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin : '#1E9FFF' //自定义选中色值
            , skip : true //开启跳页
            , theme : 'layui-footer'
            , jump : function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页');
                }
            }
        });

    });
</script>
</body>
</html>
